iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
自我挑戰組

一個令我自豪的App完成之路系列 第 11

Firebase來幫忙登入畫面 Day 11

  • 分享至 

  • xImage
  •  

因為昨天安裝了Firebase的資料庫,那麼今天就來使用Firebase實作登入畫面的操作


在Firebase的後台控制先開啟Sign-In Method的電子郵件及密碼

https://i.imgur.com/nuVNtVS.png

安裝Firebase/auth

// 在podfile內
pod 'Firebase/Auth'

// 在Terminal內移動至專案的資料夾
pod install
// 會安裝Firebase/auth

建立登入的Button

https://i.imgur.com/Sgbnx8J.png

在該ViewController.swift內新增import來使用SDK

// 透過import 來使用SDK
import FirebaseAuth

將剛剛建立好的Button與VC做@IBAction連結

在Register的@IBAction內新增

@IBAction func Register(_ sender: Any){
	// 透過使用UIAlert的出現來註冊帳號,驗證帳號密碼的書寫錯誤的部分則由Firebase來執行
	// 使用UIAlert必須先有一個UIAlertController
	let RegisterAlert = UIAlertController(title:"註冊",message:"",preferredStyle: .alert)
	// 註冊的UIAlertAction
	let RegisterAction = UIAlertAction(title: "Register Right Now", style: .default){ 
			// 使用Closure
			(action) in
            let emailtextfield = RegisterAlert.textFields![0]
            let passwprdtextfield = RegisterAlert.textFields![1]

	// 使用Firebase的Auth,來新增使用者到Firebase上面
	Auth.auth().createUser(withEmail: emailtextfield.text!, password: passwprdtextfield.text!,completion:{ (user,error) in
                if error == nil{
                    Auth.auth().signIn(withEmail: emailtextfield.text!, password: passwprdtextfield.text!, completion: nil)
                }else{
										// 如果失敗則顯示錯誤訊息
                    let alert = UIAlertController(title: "Error", message: error?.localizedDescription, preferredStyle: .alert)
                    let alertAction = UIAlertAction(title: "OK", style: .cancel, handler: nil)
                    alert.addAction(alertAction)
                    self.present(alert, animated: true, completion: nil)
                }              })
   }

	// 取消註冊的UIAlertAction
	let CancelAction = UIAlertAction(title:"取消", style: .cancel, handler: nil)

  // 新增TextField在UIAlertController內,且新增Placeholder
	RegisterAlert.addTextField{(emailtextfield) in emailtextfield.placeholder = "請輸入Email"}
  RegisterAlert.addTextField{(passwordtextfield) in passwordtextfield.placeholder = "請輸入password"
            passwordtextfield.isSecureTextEntry = true
        }
      
  // 將兩個UIAlertAction加入UIAlertController內  
  RegisterAlert.addAction(RegisterAction)
  RegisterAlert.addAction(cancelAction)
  
  // 顯示      
  present(RegisterAlert, animated: true, completion: nil)
        
        
        
    }

在Login的@IBAction新增下面的代碼

@IBAction func login (_ sender: Any){
	// 使用FirebaseAuth來驗證登入是否正確
	Auth.auth().signIn(withEmail: account.textfield.text!, password: password.textfield.text!, completion: {
            (user,error) in
            if error != nil{
                let ErrorAlert = UIAlertController(title: "Error Alert", message: "Alert", preferredStyle: .alert)
                let ErrorAction = UIAlertAction(title: "Error", style: .cancel, handler: nil)
                
                ErrorAlert.addAction(ErrorAction)
                self.present(ErrorAlert, animated: true, completion: nil)
            }
		        
						// 當下如果登入成功,那麼就會跳轉到下個頁面
						// 需要先設定跳轉的Segue跟他的Identifier名字
						if user != nil{
								self.performSegue(withIdentifier: "LogIning", sender: nil)
					  }
   })
        
}

https://i.imgur.com/XTl8Fo2.png

註冊成功跳轉畫面

https://i.imgur.com/3G3DHf4.gif

登入成功跳轉畫面

https://i.imgur.com/5vXU2MY.gif


參考網站:

[APP開發-使用Swift] 21-2. Firebase - 新增

實作 iOS App 的 Facebook 登入功能


上一篇
安裝FireBase入門 Day 10
下一篇
Firebase來幫忙資料上傳 Day 12
系列文
一個令我自豪的App完成之路32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言